<template>
  <div class="container">
    <!-- 搜索页左侧 -->
    <div class="leftContainer">
      <ul class="cateory">
        <li class="item_on">
          <img
            src="https://pixl.decathlon.com.cn/p1784216/k$e1447b43fd8bc6b8c51f581661e7ef39/sq/AT+500+KIPRUN+FAST+CHILDREN+S+ATHLETICS+SHOES+LIGHT+BLUE+NEON+RED.webp?f=100x100"
            alt=""
          />
          <div class="categoryName">
            <p>鞋子</p>
            <i>&gt;</i>
          </div>
        </li>
        <li>
          <img
            src="https://pixl.decathlon.com.cn/p1789103/k$aa91e51c335d7b056c5f60f9c5266d74/sq/AT+500+KIDS+ATHLETICS+T+SHIRT+TURQUOISE.webp?f=100x100"
            alt=""
          />
          <div class="categoryName">
            <p>上装</p>
            <i>&gt;</i>
          </div>
        </li>
        <li>
          <img
            src="https://pixl.decathlon.com.cn/p1789096/k$8e9ac7e4f929a40771176fae1d633d13/sq/AT+500+BOYS+ATHLETICS+SHORTS+BLUE.webp?f=100x100"
            alt=""
          />
          <div class="categoryName">
            <p>下装</p>
            <i>&gt;</i>
          </div>
        </li>
        <li>
          <img
            src="https://pixl.decathlon.com.cn/p1561740/k$ec4c14178c77d2a35924501ffcc0b9a2/sq/Confort+children+s+athletics+socks+high+pack+of+2+indigo.jpg?f=100x100"
            alt=""
          />
          <div class="categoryName">
            <p>袜子</p>
            <i>&gt;</i>
          </div>
        </li>
        <li>
          <img
            src="https://pixl.decathlon.com.cn/p1781571/k$60bf25f833610abe3fde5866c44e818a/sq/.webp?f=56x56"
            alt=""
          />
          <div class="categoryName">
            <p>帽子</p>
            <i>&gt;</i>
          </div>
        </li>
        <li>
          <img
            src="https://pixl.decathlon.com.cn/p1517557/k$34f7a6e83f1ba03e2fd5a8856d897d38/sq/W200+S+women+s+running+stopwatch+Orange+and+Blue.jpg?f=100x100"
            alt=""
          />
          <div class="categoryName">
            <p>附件</p>
            <i>&gt;</i>
          </div>
        </li>
      </ul>
      <div class="screening">
        <p class="shuaixuan">筛选</p>
        <p class="jiage">分类价格</p>
        <div class="price">
          <div class="change">
            <span @click = "show1" v-show="showSpan1 === true">{{value1?value1:value3}}</span>
            <input type="text"   v-show="showSpan1 === false" @blur="handleInput1" @keyup.enter="handleInput1" ref="saveFocus1" v-model="value1">
          </div>
          <div class="change">
            <span @click = "show2" class="rightspan" v-show="showSpan2 === true" >{{value2?value2:value4}}</span>
            <input type="text" class="rightspan" v-show="showSpan2 === false" @blur="handleInput2" @keyup.enter="handleInput2" ref="saveFocus2" v-model="value2">
          </div>
          
          <div class="selectRigion">
            <div class="circle"></div>
            <div class="rectangle"></div>
            <div
              class="circle"
              style="margin-left: 0; margin-right: 15px"
            ></div>
          </div>
        </div>
      </div>
      <div class="categoryColor">
        <p>分类颜色</p>
        <ul>
          <li></li>
          <li style="background: #ef852e"></li>
          <li style="background: #9f9fa0"></li>
          <li></li>
          <li style="background: #e30076"></li>
          <li style="background: #7c3380"></li>
          <li style="background: #db002c"></li>
          <li style="background: #00883f"></li>
          <li style="background: #4dbabe"></li>
          <li style="background: #0070b1"></li>
        </ul>
      </div>
      <div class="categorySize">
        <div>分类尺寸</div>
        <div class="size">
          <div class="select">
            <input type="checkbox">
            <p>161-172CM14-15岁(20)</p>
          </div>
          <div class="select">
            <input type="checkbox">
            <p>151-160CM12-14岁(20)</p>
          </div>
          <div class="select">
            <input type="checkbox">
            <p>149-159CM12-13岁(8)</p>
          </div>
          <div class="select">
            <input type="checkbox">
            <p>160-166CM14-15岁(20)</p>
          </div>
          <div class="select">
            <input type="checkbox">
            <p>141-148CM10-11岁(15)</p>
          </div>
          <div class="select">
            <input type="checkbox">
            <p>169-179CM18-19岁(20)</p>
          </div>
          <div class="select">
            <input type="checkbox">
            <p>141-148CM10-11岁(12)</p>
          </div>
          <div class="select">
            <input type="checkbox">
            <p>均码(28)</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 搜索页右侧 -->
    <div class="rightContainer">
      <div class="navbar">
        <ul>
          <li @mouseenter="changeborder" @mouseleave="deleteborder">综合</li>
          <li @mouseenter="changeborder" @mouseleave="deleteborder">新品</li>
          <li @mouseenter="changeborder" @mouseleave="deleteborder">评价</li>
          <li @mouseenter="changeborder" @mouseleave="deleteborder">折扣</li>
          <li @mouseenter="changeborder" @mouseleave="deleteborder">价格</li>
        </ul>
        <div class="count">
          <span>共91件商品</span>
        </div>
      </div>
      <div class="productList">
        <div class="productItem" v-for="(searchItem,index) in searchList" :key="searchItem.id" @click="toDetail(searchItem.id)">
          <div class="top">
            <div class="new">新品</div>
            <img :src="searchItem.goodsImages[0]"/>
            <div class="price">
              <span class="large">{{searchItem.price}}</span>
              <span class="small">.90</span>
            </div>
          </div>
          <div class="center">
            <div class="brand">{{searchItem.brand}}</div>
            <div class="name">{{searchItem.name}}</div>
          </div>
          <div class="bottom">
            <i class="iconfont icon-xingzhuang60kaobei2-copy-copy"></i>
            <i class="iconfont icon-xingzhuang60kaobei2-copy-copy"></i>
            <i class="iconfont icon-xingzhuang60kaobei2-copy-copy"></i>
            <i class="iconfont icon-xingzhuang60kaobei2-copy-copy"></i>
            <i class="iconfont icon-wujiaoxingyiban"></i>
          </div>
        </div>      
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "search",
  data() {
    return {
      searchList:[],
      showSpan1:true,
      showSpan2:true,
      value1:'',
      value2:'',
      value3:'3',
      value4:'300'
    };
  },
  mounted() {
    this.getSearchList();
  },
  methods: {
    async getSearchList() {
      const result = await this.$API.reqSearchList();
      this.searchList = result.data
    },
    changeborder(event){
      const li = event.target
      li.style.border="1px solid #0082C3";
    },
    deleteborder(event){
      const li = event.target
      li.style.border="";
    },
    toDetail(id){
      this.$router.push('/detail?id='+ id )
    },
    show1(){
      this.showSpan1 = false
      this.$nextTick(() => {
        this.$refs.saveFocus1.focus()
      })
    },
    show2(){
      this.showSpan2 = false
      this.$nextTick(() => {
        this.$refs.saveFocus2.focus()
      })
    },
    handleInput1(){
      this.showSpan1 = true
      if (this.value1.trim() === "") {
        this.value1 = ''
      }else{
        this.value3 = this.value1
      }
      if(this.value1>this.value4){
        this.value1 = this.value4
      }
    },
    handleInput2(){
      this.showSpan2 = true
      if (this.value2.trim() === "") {
        this.value2 = ''
      }else{
        this.value4 = this.value2
      }

      if(this.value2<this.value3){
        this.value2 = this.value1
      }
    },
  },
};
</script>

<style lang="less" scoped>
.clearFix() {
  *zoom: 1;
  &::after {
    content: "";
    display: block;
    clear: both;
  }
}
.container {
  height: 800px;
  // margin-top: 10px;
  border-top: 1px solid #E6E6E6;
  padding-top: 64px;
  .leftContainer {
    
    position: fixed;
    width: 300px;
    height: 900px;
    float: left;
    background-color: #fff;
    // overflow: hidden;
    overflow-y: scroll;
    .cateory {
      width: 280px;
      border: 1px solid #E6E6E6;
      li {
        border-bottom: 1px solid #E6E6E6;
        height: 50px;
       
        img {
          float: left;
          width: 50px;
          height: 50px;
          margin-left: 15px;
        }
        .categoryName{
          width: 215px;
          // background: chartreuse;
          float: left;
          &:hover {
            // background: cadetblue;#C0C0C0
            background:-webkit-linear-gradient(left,#fff, #E6E6E6);
          }
          p {
            float: left;
            height: 50px;
            line-height: 50px;
            font-size: 12px;
            padding: 0 37px 0 15px;
            font-weight: 700;
          }
          i {
            float: right;
            height: 50px;
            line-height: 50px;
            font-size: 16px;
            padding-right: 20px;
            color: #878787;
          }
        }
      }
    }
    .screening {
      .shuaixuan {
        margin: 15px;
        font-size: 14px;
      }
      .jiage {
        margin: 10px 15px 5px;
        font-size: 14px;
      }
      .price {
        .change{
          display: inline-block;
          span {
            width: 80px;
            height: 32px;
            border: 2px solid black;
            display: inline-block;
            margin: 10px 25px 4px 18px;
            line-height: 32px;
            font-size: 14px;
            text-align: center;
            box-sizing: border-box;
            &.rightspan {
              margin: 10px 18px 4px 47px;
            }
          }
          input{
            box-sizing: border-box;
            width: 80px;
            height: 32px;
            margin: 10px 25px 4px 18px;
            border: 2px solid black;
            line-height: 32px;
            font-size: 14px;
             &.rightspan {
              margin: 10px 18px 4px 47px;
            }
          }
        }
        .selectRigion {
          .circle {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: #0080c0;
            float: left;
            margin-left: 13px;
            border: 1px solid white;
          }

          .rectangle {
            width: 216px;
            height: 6px;
            float: left;
            background: #0080c0;
            margin-top: 5px;
          }
        }
      }
    }
    .categoryColor {
      .clearFix();
      p {
        font-size: 13px;
        margin: 50px 30px 0px 15px;
      }
      ul {
        margin: 20px;
        height: 100px;
        li {
          box-sizing: border-box;
          float: left;
          width: 36px;
          height: 36px;
          margin: 6px;
          border: 1px solid #E6E6E6;
        }
      }
    }
    .categorySize{
      font-size: 13px;
      margin: 20px 30px 0px 15px;
      .size{
        border: 1px  solid #E6E6E6;
        .select{
          padding: 10px;
          input{
            margin-right:10px
          }
          p{
            display: inline-block
          }
        }
      }
    }
  }
  .rightContainer {
    .clearFix();
    width: 1560px;
    margin-right: 20px;
    float: right;
    .navbar {
      ul {
        border: 1px solid #E6E6E6;
        height: 36px;
        float: left;
        li {
          float: left;
          border-right: 1px solid #E6E6E6;
          width: 64px;
          height: 36px;
          line-height: 36px;
          text-align: center;
          // color: #D4D4D4;
          &active{
            border: 2px solid #0082C3;
          }
        }
      }
      .count {
        float: left;
        border-top: 1px solid #E6E6E6;
        border-bottom: 1px solid #E6E6E6;
        border-right: 1px solid #E6E6E6;
        height: 36px;
        line-height: 36px;
        width: 1231px;
        span {
          padding-left: 20px;
        }
      }
    }
    .productList {
      .clearFix();
      float: left;
      margin-top: 20px;
      .productItem {
        width: 390px;
        height: 350px;
        border: 1px solid #E6E6E6;
        box-sizing: border-box;
        float: left;
        .top{
          position: relative;
          .new {
            background-color: rgb(129, 38, 163);
            color: rgb(255, 255, 255);
            font-weight: 700;
            position: absolute;
            padding: 1px 3px;
            font-size: 10px;
            transform: rotate(-7deg);
            text-shadow: 0 0 2px #fff;
            margin: 10px;
          }
          .price {
            background-color: #ffea28;
            padding: 2px;
            position: absolute;
            right: 0;
            margin: 20px 10px;
            .large {
              font-size: 16px;
              font-weight: 700;
            }
            .small {
              font-size: 10px;
              font-weight: 700;
            }
          }
          img {
            position: absolute;
            left: 90px;
            top: 50px;
            width: 200px;
            height: 200px;
          }
        }
        .center {
          .brand {
            font-weight: 700;
            text-align: center;
            margin-top: 280px;
          }
          .name {
            text-align: center;
          }
        }
        .bottom{
          text-align: center;
          i{
            color: #FFB339;
            font-size:18px;

          }
        }
      }
    }
  }
}
</style>
